<template>
    <el-dialog v-model="centerDialogVisible" title="详细信息" width="800" align-center @closed="close">
        <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item v-for="item in optionData">
                <template #label>
                    <div class="cell-item">
                        {{ item.show }}
                    </div>
                </template>
                {{ item.name }}
            </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="center">巡检项目信息</el-divider>
        <el-table :data="inspectionProjectList">
            <el-table-column align="center" label="项目名称" prop="projectName"/>
            <el-table-column align="center" label="检查方式" prop="inspectionMethod"/>
        </el-table>
    </el-dialog>
</template>
<script setup>
import { getCurrentInstance, ref } from 'vue'
import { listCenterAll } from '@/api/ar_check/center.js'
import { listProjectAll } from '@/api/ar_check/project.js'
import { dayjs } from 'element-plus'

const { proxy } = getCurrentInstance()
const { inspection_type, inspection_status } = proxy.useDict('inspection_type', 'inspection_status')

const centerDialogVisible = ref(false)
const centerList = ref([])
const inspectionProjectList = ref([])
const optionData = ref([])

async function open(row) {
    if (row) {
        await getCenterList()
        await getProjectList()
        optionData.value.push({ show: '任务ID', name: row.planId })
        optionData.value.push({ show: '任务名称', name: row.taskName })
        optionData.value.push({ show: '巡检类型', name: getInspectionType(row.frequencyType) })
        optionData.value.push({ show: '巡检次数', name: row.frequencyValue })
        optionData.value.push({ show: '巡检区域', name: getCenterToString(row.inspectionAreas) })
        optionData.value.push({ show: '巡检班组', name: row.teamName })
        optionData.value.push({ show: '巡检状态', name: getInspectionInspectionStatus(row) })
        optionData.value.push({ show: '任务开始时间', name: row.startDate })
        optionData.value.push({ show: '任务结束时间', name: row.endDate })
        optionData.value.push({ show: '创建人', name: row.createBy })
        optionData.value.push({ show: '创建时间', name: row.createTime })
        optionData.value.push({ show: '更新人', name: row.updateBy })
        optionData.value.push({ show: '更新时间', name: row.updateTime })
        optionData.value.push({ show: '审核人', name: row.reviewer })
        optionData.value.push({ show: '审核时间', name: row.auditTime })
        centerDialogVisible.value = true
    }
}

/** 获取巡检状态*/
function getInspectionType(type) {
    const typeObj = inspection_type.value.find(value => value.value === type)
    if (!typeObj) {
        return '无'
    }
    return typeObj.label
}

/** 获取巡检班组*/
function getInspectionInspectionStatus(row) {
    if (row.status === 'Approved') {
        const start = dayjs(row.startDate)
        const end = dayjs(row.endDate)
        const current = dayjs()

        // 判断当前时间是否在指定范围内
        const between = current.isAfter(start) && current.isBefore(end)
        if (between) {
            if (row.status !== 'Approved') {
                const status = inspection_status.value.find(value => value.value === row.status)
                return status.value === 'Pending' ? '待审核' : status.value === 'Completed' ? '已完成' :
                    status.value === 'rejection' ? '已驳回' : '未知'
            }
            return '进行中'
        } else return current.isBefore(end) ? '未开始' : '已结束'
    }
    return row.status === 'Pending' ? '待审核' : row.status === 'Completed' ? '已完成' : '已驳回'
}

/** 关闭回调*/
function close() {
    optionData.value = []
    centerDialogVisible.value = false
}

/** 转换机房信息*/
function getCenterToString(id) {
    return id.split(',').map(val => centerList.value.find(value => value.roomId === +val).roomName).join('、')
}

/*查询机房列表*/
async function getCenterList() {
    const { data } = await listCenterAll()
    centerList.value = data
}

/** 获取项目列表*/
async function getProjectList() {
    const { data } = await listProjectAll()
    inspectionProjectList.value = data
}

defineExpose({
    open
})

</script>

<style scoped lang="scss">

</style>
